<template>
  <div class="content-box">
    <div style="margin-top: 40px">
      <h1>
        校园活动
      </h1>
      <p>发现并参与丰富多彩的校园活动，拓展视野，结交朋友，丰富你的大学生活。</p>
    </div>
    <div style="padding: 20px 0">
      <el-carousel
          trigger="click"
          height="500px"
      >
        <el-carousel-item v-for="(item, idx) in eventPage.list" :key="idx">
          <div>
            <el-image :src="item.cover"></el-image>
            <div class="carousel-overlay"></div>
            <div class="carousel-content">
              <h2 class="carousel-title">{{ item.title }}</h2>
              <p class="carousel-desc">{{ item.description }}</p>
              <el-button
                  type="primary"
                  @click="goEventDetail(item.eventId)"
                  class="carousel-btn"
              >
                查看详情
              </el-button>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-card>
      <el-space>
        <el-button round :type="eventQuery.categoryId===0 ? 'primary' :''" @click="eventQuery.categoryId=0">全部
        </el-button>
        <el-button round v-for="item in eventCategoryList" :type="eventQuery.categoryId===item.id ? 'primary' :''"
                   @click="eventQuery.categoryId=item.id">{{ item.name }}
        </el-button>
      </el-space>
      <el-form inline :model="eventQuery" size="large" label-position="top" style="margin-top: 20px">
        <el-form-item label="开始时间">
          <el-date-picker
              v-model="eventQuery.startTime"
              type="date"
              placeholder="Pick a day"
          />
        </el-form-item>
        <el-form-item label="活动地点">
          <el-input v-model="eventQuery.location"></el-input>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model="eventQuery.keyword"></el-input>
        </el-form-item>
          <el-button  @click="getEventPage">搜索</el-button>
      </el-form>
    </el-card>
    <div style="padding: 20px 0">
      <el-space size="large" wrap>
        <event-card @click="goEventDetail(item.eventId)" v-for="(item, index) in eventPage.list" :key="index" :eventInfo="item"></event-card>
      </el-space>
      <div style="margin-top: 30px" class="flex-center">
        <el-pagination
            background
            hide-on-single-page
            v-model:current-page="eventQuery.pageNum"
            layout="prev, pager, next"
            v-model:page-size="eventQuery.pageSize"
            :total="eventPage.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref, watch} from "vue";
import {useRouter,useRoute} from "vue-router";
import {reqGetEventPage, reqEventPersonInfo, reqGetEventCategoryList} from "@/api/social/event";
import type {SocEvents} from "@/api/social/event/type";
import {dateDefaultFormat} from '@/utils'
import {useUserStore} from "@/stores/user";
import {Picture, Clock, Avatar, Male} from '@element-plus/icons-vue'
import EventCard from "@/components/card/EventCard.vue";

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
let eventCategoryList = ref([])

// 数据
let eventQuery = reactive({
  pageNum: 1,
  pageSize: 8,
  scope: '-1',
  keyword: '',
  startTime: null,
  location: '',
  categoryId: parseInt(<string>route.query.categoryId) || 0
})

let eventPage = reactive({
  total: 0,
  pageNum: 1,
  list: [] as SocEvents[]
})

let getEventCategory = () => {
  reqGetEventCategoryList().then(res => {
    eventCategoryList.value = res.data
  })
}

// 方法
let getEventPage = () => {
  reqGetEventPage(eventQuery).then(res => {
    Object.assign(eventPage, res.data)
  })
}

let goEventDetail = (eventId: string) => {
  router.push({
    name: 'event-detail',
    query: {eventId}
  })
}

let goPublishEvent = () => {
  router.push({
    name: 'event-create'
  })
}

// 初始化
onMounted(() => {
  getEventPage()
  getEventCategory()
})
watch([() => eventQuery.pageNum], () => {
  getEventPage()
})
</script>

<style scoped>
.event-item .event-title {
  display: block;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-item .event-date {
  font-size: 12px;
  color: #999;
}


.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0.2)
  );
}

.carousel-content {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  max-width: 600px;
  color: #fff;
  z-index: 10;
}

.carousel-title {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 15px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.carousel-desc {
  font-size: 16px;
  margin: 0 0 20px;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.carousel-btn {
  padding: 10px 24px;
  font-size: 15px;
}

/* 活动封面 */
.event-cover-container {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
}

.event-cover {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.event-card:hover .event-cover {
  transform: scale(1.05);
}

.hot-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 4px;
}

.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  color: #999;
}

/* 活动内容 */
.event-content {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.event-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin: 0 0 15px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 响应式适配 */
@media (max-width: 992px) {
  .event-cover-container {
    height: 140px;
  }
}

@media (max-width: 768px) {
  .event-list-container {
    padding: 10px;
  }

  .event-title {
    font-size: 15px;
  }

  .event-desc {
    font-size: 12px;
  }
}

@media (max-width: 576px) {
  .event-cover-container {
    height: 120px;
  }

  .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .search-form .el-form-item {
    margin-bottom: 10px;
  }

  .search-form .el-select,
  .search-form .el-input {
    width: 100% !important;
  }
}
</style>
